<template>
    <div>
        <h3>公告列表</h3>
        标题:
        <input type="text" v-model="can.title">
        公告类型：
        <select v-model="can.officeType">
            <option value="">请选择</option>
            <option :value="item.Id" v-for="item in data.listtype">{{ item.TypeName }}</option>
        </select>
        <input type="button" value="查询" @click="cha" class="btn btn-primary">
        <input type="button" value="导出" @click="daochu" class="btn btn-success">
        <hr>
        <input type="button" value="添加" @click="add" class="btn btn-primary">
        <input type="button" value="批量删除" @click="delall" class="btn btn-danger">
        
        
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" @click="headall" v-model="checked">
                    </td>
                    <td>Id</td>
                    <td>标题</td>
                    <td>公告内容</td>
                    <td>公告照片</td>
                    <td>状态</td>
                    <td>类型</td>
                    <td>发布时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>
                        <input type="checkbox" @change="bodyall" v-model="ids" :value="item.Id">
                    </td>
                    <td>{{ item.Id }}</td>
                    <td>{{ item.Title }}</td>
                    <td>{{ item.Desc }}</td>
                    <td>
                        <img :src="item.Photo" width="150" height="100">
                    </td>
                    <td>{{ item.State == 1 ? "显示" : "隐藏" }}</td>
                    <td>{{ item.TypeName }}</td>
                    <td>{{ moment(item.CreateTime).format("YYYY-MM-DD hh:mm:ss") }}</td>
                    <td>
                        <input type="button" value="删除" @click="del(item.Id)" class="btn btn-danger">
                        <input type="button" value="修改" @click="upd(item.Id)" class="btn btn-success">
                    </td>
                </tr>
            </tbody>

        </table>

        <span>共<b>{{ data.totalPage }}</b>页</span>
        <span>每页<b>{{ can.pageSize }}</b>条</span>
        <span>共<b>{{ can.pageIndex }}/{{ data.totalPage }}</b>页</span>
        <select @change="getOffice" v-model="can.pageSize">
            <option :value="item" v-for="item in ye">每页{{ item }}条</option>
        </select>
        <input type="button" value="首页" @click="gopage(1)" class="btn btn-link">
        <input type="button" value="上一页" @click="gopage(can.pageIndex-1)" class="btn btn-link">
        <span v-for="item in data.totalPage" @click="gopage(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="gopage(can.pageIndex+1)" class="btn btn-link">
        <input type="button" value="尾页" @click="gopage(data.totalPage)" class="btn btn-link">
        <input type="text" v-model="can.pageIndex">
        <input type="button" value="跳转" @click="gopage(can.pageIndex)" class="btn btn-warning">

    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ShopShow from './ShopShow.vue';
const route = useRoute();
const router = useRouter();
let ye:any=ref([2,4,6,8])
let data: any = reactive({
    listtype: [],
    list: [],
    totalCount: 0,
    totalPage: 0
})
let can: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    title: "",
    officeType: ""
})

let checked = ref();
let ids = ref([]);
onMounted(() => {
    getType();
    getOffice();
})



//修改
const upd=(id:any)=>{
    router.push({
        path:"/officeupd",
        query:{
            id:id
        }
    })
}

//删除
const del=(id:any)=>{
    if(confirm("确定删除吗")){
        axios({
            method:"delete",
            url:"/api/Month/DelallOffice",
            params:{
                ids:id
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功')
                ids.value=[];
                checked.value="";
                getOffice()
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}


//全选全不选
const headall = () => {
    checked.value = !checked.value;
    if (checked.value == true) {
        ids.value = data.list.map((item: any) => {
            return item.Id
        })
    } else {
        ids.value = []
    }
}
//反选
const bodyall = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}

//批量删除
const delall=()=>{
    if(confirm("确定删除吗")){
        axios({
            method:"delete",
            url:"/api/Month/DelallOffice",
            params:{
                ids:ids.value.toString()
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功')
                ids.value=[];
                checked.value="";
                getOffice()
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}



//添加
const add=()=>{
    router.push('/officeadd')
}


//导出
const daochu=()=>{
    location.href=`https://localhost:7209/api/Month/Dc`;
}


//翻页
const gopage=(num:any)=>{
    if(num<1){
        can.pageIndex=1;
        return;
    }
    if(num>data.totalPage){
        can.page=data.totalPage
        return;
    }
    can.pageIndex=num;
    getOffice();
}


//查询
const cha=()=>{
    can.pageIndex=1;
    getOffice();
}

const getOffice = () => {
    axios({
        method: "get",
        url: "/api/Month/ShowOffice",
        params: can
    })
        .then(res => {

            data.list = res.data.list,
                data.totalCount = res.data.totalCount,
                data.totalPage = res.data.totalPage
        })
        .catch(err => {
            console.log(err)
        })

}


const getType = () => {
    axios({
        method: "get",
        url: "/api/Month/GetOfficeType"
    })
        .then(res => {
            data.listtype = res.data
        })
}


</script>

<style scoped>

b{
    color: red;
}
input{
    margin: 0 7px;
}
span{
    margin: 0 7px;
}
</style>